<template>
  <form name="item-{{action}}"
        v-bind:class="['form', 'tab-form',
        fold?'fold-form--folded':'form-unfolded']">
    <field name="twitter" placeholder="twitter"
            input="tab.twitter"
            icon="twitter">
      <input name="tab-form--tabname" type="text"
              tabindex="1" class="form-input form-input--twitter"
              placeholder="twitter" v-model="tab.twitter" />
    </field>
    <field name="facebook" placeholder="facebook"
            input="tab.facebook"
            icon="facebook">
      <input name="tab-form--tabname" type="text"
              tabindex="1" class="form-input form-input--facebook"
              placeholder="facebook" v-model="tab.twitter" />
    </field>
    <field name="youtube" placeholder="youtube"
            input="tab.youtube"
            icon="youtube">
      <input name="tab-form--tabname" type="text"
              tabindex="1" class="form-input form-input--youtube"
              placeholder="youtube" v-model="tab.twitter" />
    </field>

    <input type="submit"
            tabindex="4"
            v-bind:class="['form-action', 'form-submit',
                            'tab-form--action', 'tab-form--submit']"
            value="{{action}}"
            v-on:click="dispatch($event)" />
    <input type="reset"
            tabindex="5"
            v-bind:class="['form-action', 'form-cancel',
                    'tab-form--action', 'tab-form--cancel']"
            value="cancel"
            v-on:click="toggleForm($event)" />
  </form>
</template>

<script>
  'use strict';
  import store from '../../store';
  import field from './field.vue';
  export default {
    data() {
      return {
          'youtube': '',
          'facebook': '',
          'twitter': '',
      }
    },
    components: {
      field,
    },
  }


</script>
